<template>
  <box-skin type="bottom">
    <div class="c-launch" px-10>
      <img
        class="c-launch__logo"
        src="https://s10.mogucdn.com/mlcdn/c45406/190219_4ii32ja6gi9hdeb56k2487ce7eh24_60x60.png"
      />
      <div class="c-launch__download" ml-10>
        <span style="color: #000" mb-5>蘑菇街 总有高手帮你挑</span>
        <div>
          <Icon
            :is="Star"
            theme="filled"
            size="12"
            :fill="['#f3ad4a', '#f3ad4a']"
            mr6
          ></Icon>
          <Icon
            :is="Star"
            theme="filled"
            size="12"
            :fill="['#f3ad4a', '#f3ad4a']"
            mr6
          ></Icon>
          <Icon
            :is="Star"
            theme="filled"
            size="12"
            :fill="['#f3ad4a', '#f3ad4a']"
            mr6
          ></Icon>
          <Icon
            theme="filled"
            :is="Star"
            size="12"
            :fill="['#f3ad4a', '#f3ad4a']"
            mr6
          ></Icon>
          <Icon
            theme="filled"
            :is="Star"
            size="12"
            :fill="['#f3ad4a', '#f3ad4a']"
          ></Icon>
          <span style="color: #8e8e92" ml-10>超过2亿用户已下载</span>
        </div>
      </div>
      <div class="c-launch__button" px-5 py-5 bor-4 text-tertiary bg-tertiary>
        打开APP
      </div>
    </div>
  </box-skin>
</template>
<script setup>
import BoxSkin from "@/components/box-skin/BoxSkin.vue";
import Icon from "@/components/icon/Icon.vue";
import { Star } from "@icon-park/vue-next";
</script>
<style lang="scss" scoped>
@include b(c-launch) {
  display: flex;
  align-items: center;
  height: 50px;
  @include e(logo) {
    @include dimensions(30px);
  }
  @include e(download) {
    flex: 1;
    @include grid($flex-direction: column);
  }
}
</style>
